<template>
	<div class="magin">
		<div class="formLeft">
			<div class="formMain">
				<el-form label-position="center" :model="formdate" label-width="100px" size="mini">
					<el-row :gutter="5" class="form-el-row">
						<el-col :span="24">
							<el-form-item label="用户名：" class="lable1">
								<el-input v-model="formdate.userName" style="width: 200px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="密码：" class="lable1">
								<el-input v-model="formdate.userPassword" style="width: 200px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="验证码：" class="lable1">
								<el-input style="width: 100px;" v-model="code"></el-input>
								<el-tag style="left: 40px;" @click="getNum()" type="warning">{{verificationCode}}</el-tag>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-button class="button" type="primary" @click="subimt()">登录</el-button>
						</el-col>
						<el-col :span="12">
							<el-radio style="left: 10%;color: #FFFFFF;" label="1">备选项</el-radio>
						</el-col>
						<el-col :span="12">
							<el-link style="float: right;right: 10%;color: #FFFFFF;" type="primary" href="/#/re">注册</el-link>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		get
	} from '../../plugin/http.js';
	export default {
		name: 'login',
		data: () => ({
			verificationCode: '12345',
			formdate: {},
			code: ''
		}),
		mounted: function() {
			this.getNum()
		},
		methods: {
			//获取验证码
			getNum() {
				//获取纯数字验证码
				//this.getnumber();
				//获取数字字母混合
				this.getblend();
			},
			getnumber() {
				const arr = [];
				for (let i = 0; i < 5; i++) {
					//获取随机数字0-1整数
					const number = parseInt(Math.random() * 10);
					//添加数组
					arr.push(number);
				}
				//将数组元素拼接 以什么拼接
				this.verificationCode = arr.join("");
			},
			getblend() {
				const arr = [];
				for (let i = 0; i < 5; i++) {
					//获取随机数字0-1整数
					const number = parseInt(Math.random() * 123);
					if (number >= 0 && number <= 9) {
						//添加数组
						arr.push(number);
					} else if ((number >= 97 && number <= 122) || (number >= 65 && number <= 90)) {
						//添加数组,并将数值转化为字母
						arr.push(String.fromCharCode(number));
					} else {
						i--;
					}
				}
				//将数组元素拼接 以什么拼接
				this.verificationCode = arr.join("");
			},
			//验证用户登录，后期封装方法
			subimt() {
				//登录验证码验证
				if (this.verificationCode == this.code) {
					get('/login', this.formdate).then(res => {
						debugger
						if (res.data.code == '200') {
							debugger
							//保存token本地
							localStorage.setItem("token", res.data.data.Authorization)
							this.$router.push('/')
							//清除token
							//localStorage.removeItem('token ');
						}else{
							this.$message.info("用户不存在，请检查重新登录");
						}

					}).catch(err => {
					
					});
				} else {
					this.code = '';
					this.$message.info("验证码错误请重新输入");
				}

			}
		},
	}
</script>
<style scoped>
	* {
		margin: 0;
		padding: 0;
		position: relative;
	}

	.magin {
		width: 100%;
		height: 100%;
		background-image: url(../../assets/static/imgs/beijing.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.formLeft {
		top: 10%;
		width: 570px;
		height: 570px;
		float: right;
		margin: auto;
		background-image: url('../../assets/static/login/1.png');
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.formMain {
		width: 330px;
		top: 185px;
		height: 335px;
		margin: auto;
	}

	.button {
		width: 60%;
		left: 30%;
	}

	.el-col-12 {
		top: 50px;
	}
</style>
<style>
	.lable1 .el-form-item__label {
		color: #ffffff;
	}
</style>
